import React, { useState, useEffect } from 'react';
import { 
  ProLayout,
  PageContainer,
  ProCard 
} from '@ant-design/pro-components';
import { Avatar, Dropdown, Menu, message } from 'antd';
import { 
  UserOutlined, 
  DashboardOutlined, 
  LogoutOutlined, 
  SettingOutlined,
  AppstoreOutlined,
  RobotOutlined,
  BookOutlined,
  ProjectOutlined,
  BarChartOutlined,
  SolutionOutlined,
  UnorderedListOutlined,
  FileTextOutlined,
  ReadOutlined,
  QuestionCircleOutlined
} from '@ant-design/icons';
import { history, Outlet, useLocation, useNavigate } from 'umi';
import { getStoredUserInfo, clearStoredCredentials } from '@/utils/auth';

/**
 * 仪表盘布局组件
 * 提供导航菜单和头部布局
 */
const DashboardLayout: React.FC = () => {
  const [userInfo, setUserInfo] = useState<any>(null);
  const location = useLocation();
  const navigate = useNavigate();
  const [pathname, setPathname] = useState<string>('/dashboard');
  
  // 在组件加载时获取用户信息
  useEffect(() => {
    const storedUserInfo = getStoredUserInfo();
    if (storedUserInfo) {
      setUserInfo(storedUserInfo);
    } else {
      message.error('您尚未登录或登录已过期');
      history.push('/');
    }
  }, []);
  
  // 更新当前路径
  useEffect(() => {
    if (location.pathname) {
      setPathname(location.pathname);
    }
  }, [location.pathname]);

  // 处理登出操作
  const handleLogout = () => {
    clearStoredCredentials();
    message.success('您已成功登出');
    history.push('/');
  };
  
  // 处理菜单点击
  const handleMenuClick = (path: string) => {
    navigate(path);
  };
  
  // 用户下拉菜单
  const userMenu = (
    <Menu>
      <Menu.Item key="1" icon={<UserOutlined />}>
        个人资料
      </Menu.Item>
      <Menu.Item key="2" icon={<SettingOutlined />}>
        设置
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="3" onClick={handleLogout} icon={<LogoutOutlined />}>
        登出
      </Menu.Item>
    </Menu>
  );

  return (
    <div className="h-full">
      <ProLayout
        title="存款AI共建平台"
        logo={null}
        layout="mix"
        fixSiderbar
        menuItemRender={(item, dom) => (
          <div
            onClick={() => item.path && handleMenuClick(item.path)}
            className="cursor-pointer"
          >
            {dom}
          </div>
        )}
        route={{
          path: '/',
          routes: [
//             {
//               path: '/dashboard',
//               name: '仪表盘',
//               icon: <DashboardOutlined />,
//             },
            {
              path: '/taskboard',
              name: '任务看板',
              icon: <ProjectOutlined />,
            },
            {
              path: '/alltasks',
              name: '任务总览',
              icon: <ProjectOutlined />,
            },
            {
              path: '/aireports',
              name: 'AI周报生成',
              icon: <RobotOutlined />,
            },
            {
              path: '/reports',
              name: '历史周报月报',
              icon: <BarChartOutlined />,
            },
            {
              path: '/solutions',
              name: '标准方案库',
              icon: <SolutionOutlined />,
            },
            {
              path: '/ailist',
              name: '全行AI清单',
              icon: <UnorderedListOutlined />,
            },
            {
              path: '/aipapers',
              name: 'AI论文库',
              icon: <FileTextOutlined />,
            },
            {
              path: '/aibooks',
              name: '业内解决方案',
              icon: <ReadOutlined />,
            },
//             {
//               path: '/aifaq',
//               name: 'AI_FAQ',
//               icon: <QuestionCircleOutlined />,
//             },
            {
              path: '/deposit_ai',
              name: '存款AI助手',
              icon: <RobotOutlined />,
            },
          ],
        }}
        location={{
          pathname,
        }}
        avatarProps={{
          src: <Avatar icon={<UserOutlined />} />,
          size: 'small',
          title: userInfo?.chineseName || userInfo?.englishName,
          render: (props, dom) => {
            return (
              <Dropdown overlay={userMenu} placement="bottomRight">
                {dom}
              </Dropdown>
            );
          },
        }}
        menuFooterRender={(props) => {
          return (
            <div
              className="p-4 text-center text-gray-400 text-xs"
              style={{ cursor: 'pointer' }}
            >
              © {new Date().getFullYear()} 存款AI共建平台
            </div>
          );
        }}
      >
        <PageContainer>
          <ProCard>
            <Outlet />
          </ProCard>
        </PageContainer>
      </ProLayout>
    </div>
  );
};

export default DashboardLayout; 